<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" class="head-back">
      <p>我的设备</p>
      <span></span>
    </div>
    <div class="equipmentMy-nav">
      <div
        @click="navCurrent = index"
        :class="navCurrent == index ? 'active' :''"
        v-for="(item,index) in ['电池','电瓶车','充电桩','换电柜']"
        :key="item"
        class="equipmentMy-nav-item">
        <p>{{item}}</p>
        <span></span>
      </div>
    </div>
    <!-- 电池列表-->
    <div class="equipmentMy">
      <div class="equipmentMy-sift">
        <div class="equipmentMy-sift-item">
          <input type="text" placeholder="请输入编号">
          <img :src="'sm.png' | imagePath" />
        </div>
        <div class="equipmentMy-sift-item">
          <input type="text" placeholder="请选择状态">
          <img :src="'hxl.png' | imagePath" />
        </div>
      </div>
      <div
        class="equipmentMy-item"
        v-for="(item,index) in ['1','2','3']"
        :key="item">
        <div class="equipmentMy-item-head">
          <p>序号: 1</p>
          <p>设备编号: 1233456677787</p>
          <p>状态: 故障</p>
        </div>
        <div class="equipmentMy-item-bottom" v-if="navCurrent == 1">
          <p>
            GPS信息: 87655444
            <strong @click="$.router.push('equipmentMyLife')">编辑<img :src="'edit.png' | imagePath" /></strong>
          </p>
        </div>
        <div class="equipmentMy-item-bottom" v-if="navCurrent == 2">
          <p>设备名称：充电桩1号</p>
          <p>使用中/总充电口: 12/30</p>
        </div>
        <div class="equipmentMy-item-bottom" v-if="navCurrent == 2">
          <p>地址：青浦区华徐公路888号<em>(1号楼2楼2001)</em></p>
        </div>
        <div class="equipmentMy-item-bottom" v-if="navCurrent == 3">
          <p>锂电：1块</p>
        </div>
        <div class="equipmentMy-item-bottom">
          <p>
            所属联盟: 雅迪电动车
            <strong @click="$.router.push('equipmentMyLife')">编辑<img :src="'edit.png' | imagePath" /></strong>
          </p>
          <p>
            <button class="toDown">删除</button>
            <button class="toUp">下架</button>
          </p>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        navCurrent:0
      }
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', ' background:#F4F4F4')
    }
  }
</script>
<style>
  .equipmentMy-nav{
    display: flex;
    height: 1.33rem;
    padding: 0 0.8rem;
    background-color: #FFFFFF;
    align-items: center;
    justify-content: space-between;
    color: #999999;
    font-size: 0.32rem;
    margin-bottom: 0.26rem;
  }
  .equipmentMy-nav-item{
    position: relative;
  }
  .equipmentMy-nav-item p{
    position: relative;
    z-index: 9;
  }
  .equipmentMy-nav-item span{
    display: block;
    position: absolute;
    z-index: 0;
    bottom: 0;
    width: 100%;
    height: 0.16rem;
    background-color: rgba(0,0,0,0);
  }
  .equipmentMy-nav-item.active span{
    background: linear-gradient(90deg, #6DC5C6, #8FE4E5);
    box-shadow: 0px 2px 3px 0px rgba(109, 197, 198, 0.3);
  }
  .equipmentMy-nav-item.active p{
    font-size: 0.4rem;
    color: #333333;
  }
  .equipmentMy{
    background-color: #FFFFFF;
    padding: 0.4rem 0.4rem 0.4rem;
    overflow: hidden;
  }
  .equipmentMy-sift{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .equipmentMy-sift-item{
    border: 1px solid #E5E5E5;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;
    height: 0.9rem;
    width: 3.9rem;
    padding: 0 0.26rem;
    justify-content: space-between;
  }
  .equipmentMy-sift-item:nth-child(1) img{
    width: 0.42rem;
    height: 0.42rem;
  }
  .equipmentMy-sift-item:nth-child(2) img{
    width: 0.24rem;
    height: 0.1rem;
  }
  .equipmentMy-item{
    margin-top: 0.4rem;
  }
  .equipmentMy-item-head{
    display: flex;
    background-color: #EEEEEE;
    height: 0.88rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.26rem;
    font-size: 0.32rem;
    color: #343434;
  }
  .equipmentMy-item-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
    padding: 0 0.13rem;
  }
  .equipmentMy-item-bottom p{
    flex: 1;
    font-size: 0.32rem;
    color: #343434;
    font-weight: 400;
  }
  .equipmentMy-item-bottom p:nth-child(2){
    text-align: right;
  }
  .equipmentMy-item-bottom p em{
    color: #999999;
  }
  .equipmentMy-item-bottom p strong{
    color: #6EC5C6;
    margin-left: 0.24rem;
    font-weight: 400;
  }
  .equipmentMy-item-bottom p img{
    width: 0.29rem;
    height: 0.29rem;
    margin-left: 0.06rem;
  }
  .equipmentMy-item-bottom button{
    color: #FFFFFF;
    font-size:0.32rem;
    font-weight: 400;
    width: 1.46rem;
    padding: 0.1rem 0;
    border-radius: 0.32rem;
  }
  .equipmentMy-item-bottom button.toDown{
    background-color: #FF7E7A;
  }
  .equipmentMy-item-bottom button.toUp{
    background-color: #00A4FF;
  }
</style>
